@charset "utf-8";

$fontsize:40;

@function r($px){
    @return $px/$fontsize * 1rem;
}

//共用
@mixin nav2{
    width: r(704);
    height: r(115);
    margin: 0 auto;
    vertical-align: middle;
    display: block;
    .zt_left2{
        line-height: r(96);
        display: inline-block;
        .aa{
            width: r(53);
            height: r(74);
            float: left;
            margin-top: r(10);
            img{
                width: 100%;
                height: 100%;
            }
        }
        span{
            margin-left: r(17);
            font-size: r(30);
            i{
                color: #FF9344;
            }
        }
    }
    .zt_right2{
        float: right;
        line-height: r(96);
        span{
            font-size: r(25); 
        }
        i{
            color: #FF9344;
        }
    } 
}
//html{font-size:$fontsize;}
html,body{
    width: 100%;
    height: 100%;
}
.web{
    width: 100%;
    height: 100%;
    position: relative;
    //头部
    header{
        width: 100%;
        height: r(131);
        position: absolute;
        top: 0;
        .header_left{
            width: r(125);
            height: r(57);
            border: 1px solid #FF9344;
            margin-top: r(48);
            margin-left: r(21);
            text-align: center;
            border-radius: 25px;
            line-height: r(57);
            font-size: r(20);
            float: left;
            vertical-align: middle;
            display: inline-block;
        }
        .header_middle{
            display:block;
            text-align: center;
            margin-top: r(64);
            font-size: r(25);
        }
        .selectBar{
            float: right;
            width: r(61);
            height: r(55);
            position: absolute;
            top: r(45);
            right: r(21);
            .xf{
//              position: absolute;
//              top: r(20);
//              right: r(20);
                img{
                    width: r(61);
                    height: r(41);
                }
            }
            span{
                position: absolute;
                top: r(-5);
                right:0;
                font-size: r(15);
                background: red;
                color: white;
                border-radius: 50%;
                width: r(27);
                height: r(27);
                text-align: center;
                line-height: r(27);
            }
        }
    }
    //主体
    section{
        position: absolute;
        top: r(131);
        bottom: r(136);
        width: 100%;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        .section_zt2{
            width: r(704);
            height: r(169);
            margin: 0 auto;
            vertical-align: middle;
            display: block;
            .zt_left2{
//              line-height: r(96);
                width: r(385);
                display: inline-block;
                .aa{
                    width: r(176);
                    height: r(169);
                    float: left;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .ys1{
                    margin-left: r(29);
                    font-size: r(30);
                }
                .ys2{
                    line-height: r(138);
                    margin-left: r(29);
                    font-size: r(30);
                    color: #9d9d9d;
                }
            }
            .zt_right2{
                float: right;
                line-height: r(115);
                span{
                    font-size: r(45); 
                }
                
            } 
        }
        .yanse{
            width: r(704);
            height: r(210);
            margin: 0 auto;
            
            ul li{
                float: left;
                margin-top: r(28);
            }
            ul li:nth-child(1) .yanse_1{
                width: r(195);
                height: r(149);
                background: #b2e0a0;
                text-align: center;
                font-size: r(26);
                
                img{
                    margin-top: r(20);
                    width: r(77);
                    height: r(81);
                }
            }
            ul li:nth-child(2) .yanse_2{
                width: r(195);
                height: r(149);
                background: #a0dce0;
                text-align: center;
                font-size: r(26);
                margin-left: r(55);
                margin-right: r(55);
                img{
                    margin-top: r(20);
                    width: r(77);
                    height: r(81);
                }
            }
            ul li:nth-child(3) .yanse_3{
                width: r(195);
                height: r(149);
                background: #e0b7a0;
                text-align: center;
                font-size: r(26);
                img{
                    margin-top: r(20);
                    width: r(124);
                    height: r(81);
                }
            }
        }
        .qb {
            @include nav2;
        }
        .dp {
            @include nav2;
        }
        .hy {
            @include nav2;
        }
        .zj {
            @include nav2;
        }
        .sz {
            width: r(704);
            height: r(115);
            margin: 0 auto;
            vertical-align: middle;
            display: block;
            margin-top: r(79);
            .zt_left2{
                line-height: r(96);
                display: inline-block;
                .aa{
                    width: r(77);
                    height: r(78);
                    float: left;
                    margin-top: r(10);
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                span{
                    margin-left: r(17);
                    font-size: r(30);
                    i{
                        color: #FF9344;
                    }
                }
            }
            .zt_right2{
                float: right;
                line-height: r(96);
                span{
                    font-size: r(25); 
                }
                i{
                    color: #FF9344;
                }
            } 
        }
        .lx{
            width: r(704);
            height: r(115);
            margin: 0 auto;
            vertical-align: middle;
            display: block;
//          margin-top: r(79);
            .zt_left2{
                line-height: r(96);
                display: inline-block;
                .aa{
                    width: r(77);
                    height: r(78);
                    float: left;
                    margin-top: r(10);
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                span{
                    margin-left: r(17);
                    font-size: r(30);
                    i{
                        color: #FF9344;
                    }
                }
            }
            .zt_right2{
                float: right;
                line-height: r(96);
                span{
                    font-size: r(25); 
                }
                i{
                    color: #FF9344;
                }
            }
        }
        .xuanze{
            width: r(704);
            height: r(111);
            margin: 0 auto;
            .xuan_1{
                width:r(148);
                height: r(75);
                background: #FF9344;
                border-radius: 25px;
                margin-top: r(36);
                margin-left: r(86);
                float: left;
                button{
//                  color: white;
                    background: transparent;
                    padding-left: r(52);
                    a{
                        color: white;
                        font-size: r(23);
                    }
                }
            }
            .xuan_2{
                width:r(148);
                height: r(75);
                background: #FF9344;
                border-radius: 25px;
                margin-top: r(36);
                margin-right: r(86);
                float: right;
                button{
//                  width: r(23);
//                  height: r(23);
//                  color: white;
                    background: transparent;
                    padding-left: r(52);
                    a{
                        color: white;
                        font-size: r(23);
                    }
                }
            }
        }
    }
    
    footer{
        width: 100%;
        height: r(136);
        background: white;
        position: absolute;
        bottom: 0;
        a{
            color: #000000;
        }
        
        ul li{
            width: 25%;
            height: 100%;
            float: left;
            text-align: center;
            padding-top: 8px;
            box-sizing: border-box;
            i{
                color: #FF9344;
            }
            .iconfont{
                color: #FF9344;
                font-size: r(65);
                -webkit-text-stroke: 1px #FF9344;
                color: transparent;
                
            }
            &.active .iconfont{
                color: #FF9344;
            }
            p{
                font-size: r(26);
            }
            &:hover .iconfont{
                color: red;  
            }
        }
    }
}